import React, {Component, lazy, Suspense} from 'react'
import {Redirect, Route, Switch} from 'react-router'
import '../static/scss/routes.scss'
import HeadComponent from './common/headComponent'
import NotFound from './notFound/notFound'
const DataCenterApp = lazy(() => import('./dataCenter/dataCenterApp'));
const SystemApp = lazy(() => import('./systemManagement/systemApp'));
const homePageApp = lazy(() => import('./homePage/homepageAPP'));
const MyBasicInfo = lazy(() => import('./common/myBasicInfo'));

class RouterApp extends Component {
    state = {
        routeList: [
            {name: 'homePage', component: homePageApp,},
            {name: 'dataCenter', component: DataCenterApp},
            {name: 'system', component: SystemApp},
            {name: 'myBasicInfo', component: MyBasicInfo},
        ],
        userRouter: ''
    }

    componentDidMount() {
    }

    componentWillMount() {

    }

    render() {
        const {routeList} = this.state;
        return (
            <>
                <div className="system_container">
                    <HeadComponent {...this.props}/>
                    <div className="main_container">
                        <Suspense fallback={<div style={{width: '100%', height: '100%', background: '#FCF9F2'}}/>}>
                             <Switch>
                            <Route path="/view" exact render={() => <Redirect to={'/view/homePage'}/>}/>
                            {routeList.map((item, i) => {
                                    let path = '/view/' + item.name;
                                    if (item.child && item.child.length > 0) {
                                        return <Route key={i} path={path}>
                                            <Switch>
                                                <Route exact path={path}
                                                       component={props => <item.component {...props}/>}/>
                                                {item.child.map((child, c) =>
                                                    <Route key={c} path={path + '/' + child.name}
                                                           component={props => <child.component {...props}/>}/>
                                                )}
                                            </Switch>
                                        </Route>
                                    } else {
                                        return <Route key={i} path={path}
                                                      component={props => <item.component {...props}/>}/>
                                    }
                                }
                            )}
                            <Route path="*" component={props => <NotFound {...props}/>}/>
                        </Switch>
                        </Suspense>
                    </div>
                </div>
            </>
        )
    }
}

export default RouterApp;